<template>
    <div class="attention" v-if="is_show">

        <div id="attention" :class="attention_class">

            <!--S标题-->
            <h2>
                <span>扫码关注不迷路</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S卡券内容-->
            <div id="content">
                <img v-lazy="qrcode" />
            </div>
            <!--E卡券内容-->

        </div>

    </div>
</template>

<script>
    export default {
        name: "attention",
        data() {
            return {
                // id 编辑区域class，控制打开关闭的动画
                attention_class: "close",
                // 二维码
                qrcode: ""
            }
        },
        props: {
            // 区域显示状态
            is_show: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            // 显示状态改变
            is_show() {
                this.toggle()
            }
        },
        mounted() {
            this.getAttentionQrcode()
            this.toggle()
        },
        methods: {
            /**
             * 显示隐藏区域
             */
            toggle() {
                if (this.is_show) {
                    setTimeout(() => {
                        this.attention_class = 'open'
                    }, 100)
                } else {
                    this.attention_class = 'close'
                }
            },
            /**
             * 获取关注二维码
             */
            getAttentionQrcode() {
                this.$sendGet("setting/wechat", {
                    fields: ['wechat_qrcode']
                })
                    .then((res) => {
                        this.qrcode = res.data.data.wechat_qrcode
                    })
            }
        }
    }
</script>

<style scoped lang="less" src="./attention.less"></style>
